<template>
	<el-main class="bg">
		<el-form label-position="right" :model="query" class="form p_4" label-width="120">
			<el-row>
				<el-col :xs="24" :sm="24" :lg="8">
					<el-form-item label="赛事名称">
						<el-input v-model="query.event_name"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="8">
					<el-form-item label="赛事类型">
						<el-select v-model="query.event_type">
							<el-option v-for="o in list_event_type" :key="o" :label="o" :value="o">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="8">
					<el-form-item label="赛事编号">
						<el-input v-model="query.event_number"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :lg="8">
					<el-form-item label="组赛单位">
						<el-input v-model="query.group_competition_unit"></el-input>
					</el-form-item>
				</el-col>

				<el-button type="primary" @click="search()">查询</el-button>
				<el-button @click="reset()" style="margin-right: 74px;">重置</el-button>



			</el-row>
			<el-form-item>

				<router-link
					v-if="user_group == '管理员' || $check_action('/event_application/table', 'add') || $check_action('/event_application/view', 'add')"
					class="el-button el-button--default el-button--primary" to="./view?">添加
				</router-link>
				<el-button
					v-if="user_group == '管理员' || $check_action('/event_application/table', 'del') || $check_action('/event_application/view', 'del')"
					class="" type="danger" @click="delInfo()">删除</el-button>

				<el-button v-if="user_group == '管理员'" class="" type="info" @click="exportTable()">导出表格</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="list" @selection-change="selectionChange" @sort-change="$sortChange" style="width: 100%"
			id="dataTable">
			<el-table-column fixed type="selection" tooltip-effect="dark" width="55">
			</el-table-column>
			<el-table-column prop="event_name" fixed label="赛事名称"
				v-if="user_group == '管理员' || $check_field('get', 'event_name')" min-width="150">
			</el-table-column>
			<el-table-column prop="event_type" label="赛事类型" v-if="user_group == '管理员' || $check_field('get', 'event_type')"
				min-width="150">
			</el-table-column>
			<el-table-column prop="event_number" label="赛事编号"
				v-if="user_group == '管理员' || $check_field('get', 'event_number')" min-width="150">
			</el-table-column>
			<el-table-column prop="group_competition_unit" label="组赛单位"
				v-if="user_group == '管理员' || $check_field('get', 'group_competition_unit')" min-width="150">
			</el-table-column>
			<el-table-column prop="project_leader" label="项目负责人"
				v-if="user_group == '管理员' || $check_field('get', 'project_leader')" min-width="150">
			</el-table-column>
			<el-table-column prop="contact_number" label="联系电话"
				v-if="user_group == '管理员' || $check_field('get', 'contact_number')" min-width="150">
			</el-table-column>
			<el-table-column prop="start_date" label="开始日期" v-if="user_group == '管理员' || $check_field('get', 'start_date')"
				min-width="150">
				<template slot-scope="scope">
					{{ $toTime(scope.row["start_date"], "yyyy-MM-dd") }}
				</template>
			</el-table-column>
			<el-table-column prop="end_date" label="结束日期" v-if="user_group == '管理员' || $check_field('get', 'end_date')"
				min-width="150">
				<template slot-scope="scope">
					{{ $toTime(scope.row["end_date"], "yyyy-MM-dd") }}
				</template>
			</el-table-column>
			<el-table-column prop="organizer" label="主办单位" v-if="user_group == '管理员' || $check_field('get', 'organizer')"
				min-width="150">
			</el-table-column>
			<el-table-column prop="group_significance" label="组赛意义"
				v-if="user_group == '管理员' || $check_field('get', 'group_significance')" min-width="200">
			</el-table-column>
			<el-table-column label="审核状态" prop="examine_state">
				<template slot-scope="scope">
					<!-- 将 effect 改为 dark -->
					<el-tag :type="getTagType(scope.row.examine_state)" effect="dark">
						{{ scope.row.examine_state }}
					</el-tag>
				</template>
			</el-table-column>

			<el-table-column sortable prop="create_time" label="创建时间" min-width="200">
				<template slot-scope="scope">
					{{ $toTime(scope.row["create_time"], "yyyy-MM-dd hh:mm:ss") }}
				</template>
			</el-table-column>

			<el-table-column sortable prop="update_time" label="更新时间" min-width="200">
				<template slot-scope="scope">
					{{ $toTime(scope.row["update_time"], "yyyy-MM-dd hh:mm:ss") }}
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" min-width="120"
				v-if="user_group == '管理员' || $check_action('/event_application/table', 'set') || $check_action('/event_application/view', 'set') || $check_action('/event_application/view', 'get') || $check_action('/个人报名|团队报名/table', 'add') || $check_action('/个人报名|团队报名/view', 'add')">


				<template slot-scope="scope">
					<router-link class="el-button el-button--small is-plain el-button--success" style="margin: 5px !important;"
						v-if="user_group == '管理员' || $check_action('/event_application/table', 'set') || $check_action('/event_application/view', 'set') || $check_action('/event_application/view', 'get')"
						:to="'./view?' + field + '=' + scope.row[field]" size="small">
						<span>详情</span>
					</router-link>
					<!--跨表按钮-->
					<el-button class="el-button el-button--small is-plain el-button--default" style="margin: 5px !important;"
						size="small" @click="to_table(scope.row, '/individual_registration/view')"
						v-if="user_group == '管理员' || $check_action('/individual_registration/table', 'add') || $check_action('/individual_registration/view', 'add')">
						<span>个人报名</span>
					</el-button>
					<el-button class="el-button el-button--small is-plain el-button--default" style="margin: 5px !important;"
						size="small" @click="to_table(scope.row, '/team_registration/view')"
						v-if="user_group == '管理员' || $check_action('/team_registration/table', 'add') || $check_action('/team_registration/view', 'add')">
						<span>团队报名</span>
					</el-button>
				</template>
			</el-table-column>

		</el-table>

		<!-- 分页器 -->
		<div class="mt text_center">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query.page"
				:page-sizes="[7, 10, 30, 100]" :page-size="query.size" layout="total, sizes, prev, pager, next, jumper"
				:total="count">
			</el-pagination>
		</div>
		<!-- /分页器 -->

		<div class="modal_wrap" v-if="showModal">
			<div class="modal_box">
				<!-- <div class="modal_box_close" @click="closeModal">X</div> -->
				<p class="modal_box_title">重要提醒</p>
				<p class="modal_box_text">当前有数据达到预警值！</p>
				<div class="btn_box">
					<span @click="closeModal">取消</span>
					<span @click="closeModal">确定</span>
				</div>
			</div>
		</div>


	</el-main>
</template>
<script>
import mixin from "@/mixins/page.js";
import axios from 'axios';
export default {
	mixins: [mixin],
	data() {
		return {
			// 弹框
			showModal: false,
			// 获取数据地址
			url_get_list: "~/api/event_application/get_list?like=0",
			url_del: "~/api/event_application/del?",

			// 字段ID
			field: "event_application_id",

			// 查询
			query: {
				"size": 7,
				"page": 1,
				"event_name": "",
				"event_type": "",
				"event_number": "",
				"group_competition_unit": "",
				"login_time": "",
				"create_time": "",
				"orderby": `create_time desc`
			},
			// 数据
			list: [],
			// 赛事类型列表
			list_event_type: ['团队赛', '个人赛'],
		}
	},
	methods: {
		async exportTable() {
			try {
				const apiUrl = 'http://192.168.0.102:5000/api/event_application/export';
				const response = await axios({
					url: apiUrl,
					method: 'get',
					responseType: 'blob' // 设置响应类型为 blob
				});
				const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
				const url = window.URL.createObjectURL(blob);
				const link = document.createElement('a');
				link.href = url;

				// 设置文件名，可根据实际情况修改
				link.setAttribute('download', '赛事活动申请表.xlsx');
				document.body.appendChild(link);
				link.click();
				window.URL.revokeObjectURL(url);
				document.body.removeChild(link);
			} catch (error) {
				console.error('导出 Excel 失败:', error);
				this.$message.error('导出 Excel 失败，请稍后重试');
			}
		},
		getTagType(state) {
			switch (state) {
				case '未审核':
					return 'info';
				case '已通过':
					return 'success';
				case '未通过':
					return 'danger';
				default:
					return 'default';
			}
		},
		// 关闭弹框
		closeModal() {
			this.showModal = false;
		},

		open_tip() {
			const h = this.$createElement;

			var message = "";
			var list = this.list;
			console.log(list);

			var ifs = [];
			for (var n = 0; n < ifs.length; n++) {
				var o = ifs[n];
				for (var i = 0; i < list.length; i++) {
					var lt = list[i];
					if (o.type == "数内") {
						if ((o.start || o.start === 0) && (o.end || o.end === 0)) {
							if (lt[o.factor] > o.start && lt[o.factor] < o.end) {
								o["idx"] = o["idx"] + 1;
							}
						} else if (o.start || o.start === 0) {
							if (lt[o.factor] > o.start) {
								o["idx"] = o["idx"] + 1;
							}
						} else if (o.end || o.end === 0) {
							if (lt[o.factor] < o.end) {
								o["idx"] = o["idx"] + 1;
							}
						}
					} else if (o.type == "数外") {
						if ((o.start || o.start === 0) && (o.end || o.end === 0)) {
							if (lt[o.factor] < o.start || lt[o.factor] > o.end) {
								o["idx"] = o["idx"] + 1;
							}
						} else if (o.start || o.start === 0) {
							if (lt[o.factor] < o.start) {
								o["idx"] = o["idx"] + 1;
							}
						} else if (o.end || o.end === 0) {
							if (lt[o.factor] > o.end) {
								o["idx"] = o["idx"] + 1;
							}
						}
					} else if (o.type == "日内") {
						if ((o.start) && (o.end)) {
							if (lt[o.factor] > o.start && lt[o.factor] < o.end) {
								o["idx"] = o["idx"] + 1;
							}
						} else if (o.start) {
							if (lt[o.factor] < o.start) {
								o["idx"] = o["idx"] + 1;
							}
						} else if (o.end) {
							if (lt[o.factor] > o.end) {
								o["idx"] = o["idx"] + 1;
							}
						}
					} else if (o.type == "日外") {
						if (o.start && o.end) {
							if (lt[o.factor] < o.start || lt[o.factor] > o.end) {
								o["idx"] = o["idx"] + 1;
							}
						} else if (o.start) {
							if (lt[o.factor] < o.start) {
								o["idx"] = o["idx"] + 1;
							}
						} else if (o.end) {
							if (lt[o.factor] > o.end) {
								o["idx"] = o["idx"] + 1;
							}
						}
					}
				}

				if (o["idx"]) {
					message += o.title;
					if (o["type"] == "数内") {
						if (o.start || o.start === 0) {
							message += "大于" + o.start;
						}
						if ((o.start || o.start === 0) && (o.end || o.end === 0)) {
							message += "并且";
						}
						if (o.end || o.end === 0) {
							message += "小于" + o.end;
						}
					} else if (o["type"] == "数外") {
						if (o.start || o.start === 0) {
							message += "小于" + o.start;
						}
						if ((o.start || o.start === 0) || (o.end || o.end === 0)) {
							message += "或者";
						}
						if (o.end || o.end === 0) {
							message += "大于" + o.end;
						}
					} else if (o["type"] == "日内") {
						if (o.start) {
							message += "在" + o.start + "之后";
						}
						if (o.start && o.end) {
							message += "并且";
						}
						if (o.end) {
							message += "在" + o.end + "之前";
						}
					} else if (o["type"] == "日外") {
						if (o.start) {
							message += "在" + o.start + "之前";
						}
						if (o.start || o.end) {
							message += "或者";
						}
						if (o.end) {
							message += "在" + o.end + "之后";
						}
					}
					message += "的有" + o["idx"] + "条";
				}
			}

			if (message) {
				message += "，需要处理、请尽快处理。";
				this.showModal = true;
				// this.$notify({
				// 	title: '提醒',
				// 	dangerouslyUseHTMLString: true,
				// 	message: h('i', {
				// 		style: 'color: teal'
				// 	}, message)
				// });
			}
		},
		deleteRow(index, rows) {
			rows.splice(index, 1);
		}

	},
	created() {
		setTimeout(() => {
			this.open_tip();
		}, 1000)
	}
}
</script>

<style type="text/css">
.bg {
	background: white;
}

.form.p_4 {
	padding: 1rem;
}

.form .el-input {
	width: initial;
}

.mt {
	margin-top: 1rem;
}

.text_center {
	text-align: center;
}

.float-right {
	float: right;
}


.modal_wrap {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999999999;
}

.modal_wrap .modal_box {
	width: 400px;
	height: 200px;
	background: url("../../assets/modal_bg.jpg") no-repeat center;
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -200px;
	margin-top: -100px;
	border-radius: 10px;
}

.modal_wrap .modal_box .modal_box_close {
	font-size: 20px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

.modal_wrap .modal_box .modal_box_title {
	text-align: center;
	font-size: 18px;
	margin: 16px auto;
	color: #fff;
	border-bottom: 1px solid rgba(117, 116, 116, 0.5);
	padding-bottom: 16px;
	width: 356px;
}

.modal_wrap .modal_box .modal_box_text {
	text-align: center;
	font-size: 15px;
	color: #fff;
	margin-top: 25px;
}

.modal_wrap .modal_box .btn_box {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 42px;
}

.modal_wrap .modal_box .btn_box span {
	display: inline-block;
	width: 80px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border: 1px solid #ccc;
	font-size: 14px;
	cursor: pointer;
	color: #fff;
}

.modal_wrap .modal_box .btn_box span:nth-child(2) {
	background: #409EFF;
	color: #fff;
	border-color: #409EFF;
	margin-left: 15px;
}
</style>
